<template>


    <el-carousel :interval="1000" type="card" height="200px">
        <el-carousel-item v-for="item in imageList" :key="item.id" class="indexImage">
<!--            <h3 text="2xl" justify="center">{{ item }}</h3>-->
            <h3><el-image :src="item.url" /></h3>
        </el-carousel-item>
    </el-carousel>
    <el-space wrap>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>交流帖</span>
                    <el-button class="button" @click="toList('/postWeb')" text>查看更多 ></el-button>
                </div>
            </template>
            <div v-for="post in postList" :key="post.id" class="listLi">
                {{ post.title }} &nbsp;|&nbsp; 发布时间：{{ post.gmtCreateTime }}
            </div>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>商品</span>
                    <el-button class="button" @click="toList('/commodityWeb')" text>查看更多 ></el-button>
                </div>
            </template>
            <div v-for="commodity in commodityList" :key="commodity.id" class="listLi">
                {{ commodity.name }} &nbsp;|&nbsp; 发布时间：{{ commodity.gmtCreateTime }}
            </div>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>活动</span>
                    <el-button class="button" @click="toList('/activityWeb')" text>查看更多 ></el-button>
                </div>
            </template>
            <div v-for="activity in activityList" :key="activity.id" class="listLi">
                {{ activity.title }} &nbsp;|&nbsp; 发布时间：{{ activity.gmtCreateTime }}
            </div>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>日志</span>
                    <el-button class="button" @click="getList" text>查看更多 ></el-button>
                </div>
            </template>
            <div v-for="log in logList" :key="log.id" class="listLi">
                {{ log.title }} &nbsp;|&nbsp; 发布时间：{{ log.gmtCreateTime }}
            </div>
        </el-card>

    </el-space>
  <el-button size="default" type="default" @click="getData()">获取数据</el-button>

</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";
import router from "../../../api/routerConfig";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")


const imageList = ref([
    {id: 1, url: "../../../../public/pictures/background/Road.jpg"},
    {id: 1, url: "../../../../public/pictures/background/loginBackground1.jpg"},
    {id: 1, url: "../../../../public/pictures/background/hunter_selver.jpg"},
    {id: 1, url: "../../../../public/pictures/background/Road.jpg"},
    {id: 1, url: "../../../../public/pictures/background/loginBackground2.jpg"},
    {id: 1, url: "../../../../public/pictures/background/hunter_selver.jpg"}
])

const typeMap = ref(new Map([
    ['1', "求助"],
    ['2', "教程"],
    ['3', "讨论"],
    ['4', "分享"],
    ['5', "其他"]
]))
const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/post/list");
    console.log(resp)
    postList.value = resp.list
    total.value = resp.total
}

function toList(url) {
  router.push(url)
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 5,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}

const postList = ref([])

const commodityList = ref([])

const activityList = ref([])

const logList = ref([])


async function getData() {
  let rpPost = await getPostList(
      reqParam.value,
      "/post/list"
  )
  postList.value = rpPost.list

  let rpCom = await getPostList(
      reqParam.value,
      "/commodity/list"
  )
  commodityList.value = rpCom.list

  let rpAct = await getPostList(
      reqParam.value,
      "/activity/list"
  )
  activityList.value = rpAct.list

  let rpLog = await getPostList(
      reqParam.value,
      "/log/list"
  )
  logList.value = rpLog.list

}

</script>

<style scoped>
.box-card {
    width: 600px;
    height: 500px
}
.card-header {
    height: 100px;
    width: 400px;
}

.indexImage {
    height: 250px;
}

.listLi {
    height: 40px;
    /*width: 200px;*/
    width: auto;
    background-color: #d3d4d6;
    border-color: black;
    border-width: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

</style>